<template>
	<div class="main_container" style="width: 100%">
		<el-header style="text-align: right; font-size: 12px">
			<div class="pageHeader_container">
				<el-page-header @onclick="goBack" content="患者费用明细"></el-page-header>
			</div>
		</el-header>
		<el-main>
			<div class="main_container">
				<el-card class="box-card">
					<!--搜索与添加区域-->
					<el-row :gutter="20">
						<el-col :span="8">
							<el-input placeholder="请输入内容" v-model="user.id" clearable @clear="getList">
								<el-button slot="append" icon="el-icon-search" @click="getList()"></el-button>
							</el-input>
						</el-col>
						<el-col :span="8">
							<el-tag>
								当前费用：{{counter}}
							</el-tag>
						</el-col>
					</el-row>
					<!--用户列表区-->
					<el-table height="500" :data="list" border stripe>
						<el-table-column type="index"></el-table-column>
						<el-table-column label="ID" prop="id"></el-table-column>
						<el-table-column label="挂号ID" prop="registID"></el-table-column>
						<el-table-column label="发票ID" prop="invoiceID"></el-table-column>
						<el-table-column label="项目ID" prop="itemID"></el-table-column>
						<el-table-column label="项目类型" prop="itemtype">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.itemtype===1" type="danger">药品</el-tag>
								<el-tag v-else>非药品</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="项目名称" prop="name"></el-table-column>
						<el-table-column label="项目单价" prop="price"></el-table-column>
						<el-table-column label="数量" prop="amount"></el-table-column>
						<el-table-column label="执行室ID" prop="deptID"></el-table-column>
						<el-table-column label="开立时间" prop="createtime"></el-table-column>
						<el-table-column label="支付时间" prop="paytime"></el-table-column>
						<el-table-column label="操作" width="180" align="center">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" content="计算费用" placement="top" :enterable="false">
									<el-button icon="el-icon-s-opportunity" size="mini" @click="docount(scope.row.price,scope.row.amount)">计算费用</el-button>
								</el-tooltip>
							</template>
						</el-table-column>

						
					</el-table>


				</el-card>
			</div>
		</el-main>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				list: [],
				counter: '',
			}

		},
		created() {
			this.getList()
		},
		methods: {
			goBack() {
				alert('go back');
			},
			getList() {
				let url = 'http://localhost:8888/PatientCost/selectAll';
				let param = this.$qs.stringify(this.user);
				this.$axios.post(url, param)
					.then((resp) => {
						this.list = resp.data;
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			docount(price, amount) {
				this.counter = price * amount;
			}
		}
	}
</script>

<style scoped>
	.box-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !;
	}

	.el-tag {
		margin: 0.4375rem;
	}
</style>
